<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/china.js"></script>    
    <script src="maps/anhui.js"></script>
    <script src="maps/aomen.js"></script>
    <script src="maps/beijing.js"></script>
    <script src="maps/chongqing.js"></script>
    <script src="maps/fujian.js"></script>
    <script src="maps/gansu.js"></script>
    <script src="maps/guangdong.js"></script>
    <script src="maps/guangxi.js"></script>
    <script src="maps/guizhou.js"></script>
    <script src="maps/hainan.js"></script>
    <script src="maps/hebei.js"></script>
    <script src="maps/heilongjiang.js"></script>
    <script src="maps/henan.js"></script>
    <script src="maps/hubei.js"></script>
    <script src="maps/hunan.js"></script>
    <script src="maps/jiangsu.js"></script>
    <script src="maps/jiangxi.js"></script>
    <script src="maps/jilin.js"></script>
    <script src="maps/liaoning.js"></script>
    <script src="maps/neimeng.js"></script>
    <script src="maps/ningxia.js"></script>
    <script src="maps/qinghai.js"></script>
    <script src="maps/shandong.js"></script>
    <script src="maps/shanghai.js"></script>
    <!-- shanxi是山西省     shanxi_是陕西省 -->
    <script src="maps/shanxi_.js"></script>
    <script src="maps/shanxi.js"></script>
    <script src="maps/sichuan.js"></script>
    <script src="maps/taiwan.js"></script>
    <script src="maps/tianjin.js"></script>
    <script src="maps/xianggang.js"></script>
    <script src="maps/xinjiang.js"></script>
    <script src="maps/xizang.js"></script>
    <script src="maps/yunnan.js"></script>
    <script src="maps/zhejiang.js"></script>
    <!-- 市级目录 -->
    <script src="maps/hubei/enshi.js"></script>
    <script src="maps/hubei/ezhou.js"></script>
    <script src="maps/hubei/huanggang.js"></script>
    <script src="maps/hubei/huangshi.js"></script>
    <script src="maps/hubei/jingmen.js"></script>
    <script src="maps/hubei/jingzhou.js"></script>
    <script src="maps/hubei/shiyan.js"></script>
    <script src="maps/hubei/suizhou.js"></script>
    <script src="maps/hubei/wuhan.js"></script>
    <script src="maps/hubei/xiangyang.js"></script>
    <script src="maps/hubei/xianning.js"></script>
    <script src="maps/hubei/xiaogan.js"></script>
    <script src="maps/hubei/yichang.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height: 100%"></div>
    <script type="text/javascript">

        var index = 0;
        var provinces = [
            '北京','天津','上海','重庆','河北',//0-4
            '河南','云南','辽宁','黑龙江','湖南',//5-9
            '安徽','山东','新疆','江苏','浙江',//10-14
            '江西','湖北','广西','甘肃','山西',//15-19
            '内蒙古','陕西','吉林','福建','贵州',//20-24
            '广东','青海','西藏','四川','宁夏',//25-29
            '海南','台湾','香港','澳门'//30-33
        ];
        //  陕西 是 shanxi    陕西 是 shanxi_
        var provincesName = [
            'beijing','tianjin','shanghai','chongqing','hebei',
            'henan','yunnan','liaoning','heilongjiang','hunan',
            'anhui','shandong','xinjiang','jiangsu','zhejiang',
            'jiangxi','hubei','guangxi','gansu','shanxi',
            'neimeng','shanxi_','jilin','fujian','guizhou',
            'guangdong','qinghai','xizang','sichuan','ningxia',
            'hainan','taiwan','xianggang','aomen'
        ];

        var HBprovinces = [
            '鄂州市','黄石市','武汉市','宜昌市','十堰市',
            '襄阳市','随州市','荆门市','黄冈市','咸宁市',
            '仙桃市','神农架林区','潜江市','荆州市','恩施土家族苗族自治州',
            '孝感市','天门市'
        ]

        var HBprovincesName = [
            'ezhou','huangshi','wuhan','yichang','shiyan',
            'xiangfan','suizhou','jingmen','huanggang','xianning',
            'xiantao','shenlongjia','qianjiang','jingzhou','enshi',
            'xiaogan','tianmen'
        ]

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        function randomData() {
            return Math.round(Math.random()*100);
        }

        var option = {
                //  顶部标题
                title: {
                    text: '全国雨量实时在线',
                    subtext: '云水信息',
                    left: 'center',
                    textStyle: {
                        color: '#000000',
                        fontStyle: 'normal',
                        fontWeight: 'bolder',
                        fontSize: 18
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                backgroundColor: '#ffffff',
                graphic: [{
                    id: 'back-btn',
                    type: 'circle',
                    shape: { r: 0 },
                    style: {
                        text: '',
                        fill: '#eee'
                    },
                    right: 10,
                    top: 10,
                    onclick: function () {
                        console.log("haha");
                    }
                }],
                //  筛选条件
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data:['雨量监测在线率']
                },
                //  数量颜色控件
                visualMap: {
                    min: 0,
                    max: 100,
                    left: 'left',
                    top: 'bottom',
                    text: ['100%','0'],           // 文本，默认为数值文本
                    calculable: true,
                    inRange: {
                        color: ['#79ffda','#44ff44']
                    }
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                //  地图信息及地图数据
                series: [
                    {
                        name: '雨量监测在线率',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },

                        itemStyle: {
                            normal: {
                                // 未选中的边框颜色
                                borderColor: '#808080',
                                areaColor: '#000000',
                            },
                            emphasis: {
                                //  选中的地域底色    
                                areaColor: '#00ff00',
                                borderWidth: 0
                            }
                        },
                        // itemStyle: {
                        //     normal: {
                        //         borderColor: 'ffff00'
                        //     }
                        // },
                        data:[
                            {name: '北京',value: 99 },
                            {name: '天津',value: 99 },
                            {name: '上海',value: 99 },
                            {name: '重庆',value: 99 },
                            {name: '河北',value: 99 },
                            {name: '河南',value: 99 },
                            {name: '云南',value: 99 },
                            {name: '辽宁',value: 99 },
                            {name: '黑龙江',value: 90 },
                            {name: '湖南',value: 95 },
                            {name: '安徽',value: 75 },
                            {name: '山东',value: 75 },
                            {name: '新疆',value: 75 },
                            {name: '江苏',value: 75 },
                            {name: '浙江',value: 75 },
                            {name: '江西',value: 75 },
                            {name: '湖北',value: 75 },
                            {name: '广西',value: 75 },
                            {name: '甘肃',value: 75 },
                            {name: '山西',value: 75 },
                            {name: '内蒙古',value: 20 },
                            {name: '陕西',value: 84 },
                            {name: '吉林',value: 84 },
                            {name: '福建',value: 84 },
                            {name: '贵州',value: 84 },
                            {name: '广东',value: 82 },
                            {name: '青海',value: 82 },
                            {name: '西藏',value: 82 },
                            {name: '四川',value: 82 },
                            {name: '宁夏',value: 82 },
                            {name: '海南',value: 82 },
                            {name: '台湾',value: 82 },
                            {name: '香港',value: 94 },
                            {name: '澳门',value: 94 }
                        ]
                    }
                ]
            };;

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        //  获取各个地级市名称 name = 'hubei' 获取湖北的地图信息
        //  echarts.getMap(name);  
        //  echarts.getMap('shanghai').geoJson.features.length = ’17‘
        //  echarts.getMap('shanghai').geoJson.features[0].properties.name = ’黄浦区‘

        //  通过js文件获取地图信息
        var setOptionForJS = function (index){

            var datas = [];
            // 获取省份名称
            var name = provincesName[index];
            // 根据名称获取省份信息
            var info = echarts.getMap(name).geoJson.features;
            // 地级市的个数
            var len = echarts.getMap(name).geoJson.features.length;

            for(var i=0; i<len; i++){
                datas.push({
                    name: info[i].properties.name,
                    value: randomData()
                });
            };
            // 设置信息
            myChart.setOption({
                title: {
                    text: provinces[index]+'雨量实时在线',
                    subtext: '武汉云水',
                    left: 'center'
                },
                backgroundColor: '#ffffff',
                graphic: [{
                    id: 'back-btn',
                    type: 'circle',
                    shape: { r: 40 },
                    style: {
                        text: '返回上一级',
                        fill: '#eee'
                    },
                    right: 10,
                    top: 10,
                    onclick: function () {
                        myChart.setOption(option);
                    }
                }],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data:['雨量监测在线率']
                },
                visualMap: {
                    min: 0,
                    max: 100,
                    left: 'left',
                    top: 'bottom',
                    color: 'black',
                    text: ['100%','0'],           // 文本，默认为数值文本
                    calculable: true,
                    inRange: {
                        color: ["#da0e00",'#ffff00','#67c745']
                    }
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '雨量监测在线率',
                        type: 'map',
                        mapType: provincesName[index],
                        roam: false,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: datas
                    }
                ]
            });
        }
        //  市级单位地图初始化
        var setMapForJS = function (index, Ename, Cname){

            var datas = [];
            // 获取省份名称
            var name = Ename[index];
            // 根据名称获取省份信息
            var info = echarts.getMap(name).geoJson.features;
            // 地级市的个数
            var len = echarts.getMap(name).geoJson.features.length;

            for(var i=0; i<len; i++){
                datas.push({
                    name: info[i].properties.name,
                    value: randomData()
                });
            };
            // 设置信息
            myChart.setOption({
                title: {
                    text: Cname[index]+'雨量实时在线',
                    subtext: '武汉云水',
                    left: 'center'
                },
                backgroundColor: '#ffffff',
                graphic: [{
                    id: 'back-btn',
                    type: 'circle',
                    shape: { r: 40 },
                    style: {
                        text: '返回上一级',
                        fill: '#eee'
                    },
                    right: 10,
                    top: 10,
                    onclick: function () {
                        setOptionForJS(provincesIndex);
                    }
                }],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data:['雨量监测在线率']
                },
                visualMap: {
                    min: 0,
                    max: 100,
                    left: 'left',
                    top: 'bottom',
                    color: 'black',
                    text: ['100%','0'],           // 文本，默认为数值文本
                    calculable: true,
                    inRange: {
                        color: ['#defeff','#026fdd']
                    }
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '雨量监测在线率',
                        type: 'map',
                        mapType: Ename[index],
                        roam: false,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: datas
                    }
                ]
            });
        }
        //  通过json文件获取地图信息
        var setOptionForJson = function (index) {

            $.get('json/'+provincesName[index]+'.json', function (geoJson) {

                // myChart.hideLoading();

                echarts.registerMap(provincesName[index], geoJson);

                $dataJSON = $.parseJSON(geoJson);

                console.log($dataJSON);

                var $datas = []
                var info = $dataJSON.features;
                var i = $dataJSON.features.length;

                for(var a=0; a<i; a++){
                    $datas.push({
                        name: info[a].properties.name,
                        value: randomData()
                    });
                };

                myChart.setOption({
                    backgroundColor: '#ffffff',
                    title: {
                        text: provinces[index]+'雨量实时在线',
                        left: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    graphic: [{
                        id: 'back-btn',
                        type: 'circle',
                        shape: { r: 40 },
                        style: {
                            text: '全国信息',
                            fill: '#eee'
                        },
                        right: 10,
                        top: 10,
                        onclick: function () {
                            myChart.setOption(option);
                        }
                    }],
                    series: [
                        {
                            name: '雨量监测在线率',
                            type: 'map',
                            mapType: provincesName[index],
                            roam: false,
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            animation: true,
                            data: $datas
                            //  显示字体颜色
                            // label: {
                            //     normal: {
                            //         show: true,
                            //         textStyle: {
                            //             color: '#000000'
                            //         }
                            //     },
                            //     emphasis: {
                            //         textStyle: {
                            //             color: '#ffff00'
                            //         }
                            //     }
                            // },
                            // itemStyle: {
                            //     normal: {
                            //         // 未选中的边框颜色
                            //         borderColor: '#123456',
                            //         areaColor: '#fff',
                            //     },
                            //     emphasis: {
                            //         //  选中的地域底色    
                            //         areaColor: '#00ff00',
                            //         borderWidth: 0
                            //     }
                            // },
                            //  是否开启动画，默认是true
                            // animationDurationUpdate: 1000,
                            // animationEasingUpdate: 'quinticInOut'
                        }
                    ]
                });
            });
        }
        // 获取点击的省份 在市级地图返回的时候会用到
        var provincesIndex = -1;
        //  监听页面点击事件
        myChart.on('click', function (params) {
            // 监听鼠标点击 打印点击的信息
            console.log(params.name + params.dataIndex);
            // 遍历，匹配点击的地区信息
            for (var pr in provinces) {
                // 如果点击地区的名称在数组中，就加载该地区的信息
                if (provinces[pr].indexOf(params.name) > -1) {
                    // 加载没有数据的地图，地图信息是.json文件
                    if (params.dataIndex == 1||params.dataIndex == 2 ||params.dataIndex == 3||params.dataIndex == 12||params.dataIndex == 27) {
                        provincesIndex = params.dataIndex;
                        setOptionForJson(params.dataIndex);
                    }
                    // 加载没有数据的地图，地图信息是.js文件(新疆、西藏、天津、上海、重庆 .js地图文件加载异常)
                    else 
                    {
                        provincesIndex = params.dataIndex;
                        setOptionForJS(params.dataIndex);
                    }
                }
            }

            for (var er in HBprovinces) {
                if (HBprovinces[er].indexOf(params.name) > -1) {
                    setMapForJS(params.dataIndex, HBprovincesName, HBprovinces);
                }
            }

            //window.open('allProvince.html?address=' + params.dataIndex)
            
            // window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
        });
    </script>
</body>
</html>